<script setup lang="ts">
import { toHome } from '@/utils/navigate'

defineOptions({
  name: 'Capsule',
})

const props = withDefaults(defineProps<{
  left?: boolean
  right?: boolean
  leftText?: string
  rightText?: string
  leftIcon?: string
  rightIcon?: string
  preventDefault?: boolean
  rootClass?: string
}>(), {
  size: 'default',
  left: true,
  right: true,
  leftIcon: 'left',
  rightIcon: 'list',
  preventDefault: false,
  rootClass: '',
})

const emit = defineEmits<{
  back: []
  home: []
}>()

function handleBack(e: Event) {
  emit('back')
  if (props.preventDefault) {
    e.stopPropagation()
    return
  }
  uni.navigateBack()
}
function handleHome(e: Event) {
  emit('home')
  if (props.preventDefault) {
    e.stopPropagation()
    return
  }
  toHome()
}
</script>

<template>
  <view class="capsule" :class="[props.rootClass]">
    <template v-if="props.left">
      <view class="capsule__button capsule__button--left" @click="handleBack">
        <sar-icon v-if="props.leftIcon" :name="props.leftIcon" size="20" />
        <text v-if="props.leftText" class="capsule__button-text">
          {{ props.leftText }}
        </text>
      </view>
    </template>
    <view v-if="props.left && props.right" class="capsule__divider" />
    <template v-if="props.right">
      <view class="capsule__button capsule__button--right" @click="handleHome">
        <sar-icon v-if="props.rightIcon" :name="props.rightIcon" size="20" />
        <text v-if="props.rightText" class="capsule__button-text">
          {{ props.rightText }}
        </text>
      </view>
    </template>
  </view>
</template>

<style scoped lang="scss">
.capsule {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.7); /* 半透明白色 */
  border-radius: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); /* 轻微阴影 */
  border: 1rpx solid #e5e6eb; /* 淡灰色边框 */
  overflow: hidden;
  min-width: 0;
  width: auto;
  height: 64rpx;
}
.capsule__button {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  padding: 0 24rpx;
  height: 64rpx;
  font-size: 16px;
  transition: background 0.2s;
  background: transparent;
  &--left {
    color: #333;
  }
  &--right {
    color: #018d71;
  }
  &--small {
    padding: 0 12rpx;
    height: 40rpx;
    font-size: 13px;
  }
  &:active {
    background: rgba(0, 0, 0, 0.06);
  }
}
.capsule__button-text {
  margin-left: 8rpx;
  &.capsule__button--small & {
    margin-left: 4rpx;
  }
}
.capsule__divider {
  width: 2rpx;
  background: #eee;
  height: 32rpx;
  align-self: center;
  &.capsule__button--small & {
    height: 20rpx;
  }
}
</style>
